import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import './phone.scss'
import { Toast } from "@nutui/nutui-react"
import '@nutui/nutui-react/dist/style.css'

export default function Reallogin() {
    useEffect(() => {
        setPhone(localStorage.getItem('user'))
    })
    const navigate = useNavigate()
    const [phone, setPhone] = React.useState('')

    let login = async () => {
        let { data } = await axios.post('http://123.57.180.216:3000/users/login2', { tel:phone })
        if (data.code === 200) {
            console.log(data);
            sessionStorage.setItem('piao', JSON.stringify(data.data))
            sessionStorage.setItem('move', JSON.stringify(data.data.orderid.moveid))
            localStorage.setItem('user', phone)
            sessionStorage.setItem('accesstoken', data.accesstoken)
            sessionStorage.setItem('refreshtoken', data.refreshtoken)
            sessionStorage.setItem("time", new Date().getTime())
            Toast.show({
                content: data.msg,
                contentStyle: {
                    width: '120px',
                    height: '40px',
                    fontSize: "20px"
                }
            })
            navigate('/app/home')
        } else {
            Toast.show({
                content: data.msg,
                contentStyle: {
                    width: '120px',
                    height: '40px',
                    fontSize: "20px"
                }
            })
        }
    }
    return (
        <div className='box_l'>
            <div className='top'>
                <svg t="1717760655424" className="icon" onClick={() => { navigate('/app/home') }}
                    viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="1453" width="20" height="20"><path d="M249.344 497.664v29.696c0 14.848 11.776 26.624 26.624 26.624h692.224c14.848 0 26.624-11.776 26.624-26.624v-29.696c0-14.848-11.776-26.624-26.624-26.624H275.968c-14.848 0.512-26.624 12.288-26.624 26.624z" fill="#2c2c2c" p-id="1454"></path><path d="M146.944 530.944c-10.24-10.24-10.24-27.136 0-37.376l369.664-368.64c10.24-10.24 10.24-27.136 0-37.376l-21.504-21.504c-10.24-10.24-27.136-10.24-37.376 0L42.496 479.744c8.192-7.68 18.944-12.288 30.72-12.288-24.576 0-44.544 19.968-44.544 44.544s19.968 44.544 44.544 44.544c-12.288 0-23.04-4.608-31.232-12.8l414.208 414.208c10.24 10.24 27.136 10.24 37.376 0l21.504-21.504c10.24-10.24 10.24-27.136 0-37.376l-368.128-368.128z" fill="#2c2c2c" p-id="1455"></path></svg>
            </div>
            <div className='piao'>
                <div className='piao_left'></div>
                <span>本机号码登录</span>
            </div>
            <div className='inp'>
                <p className='phone'>{phone}</p>
                <button className='btn' onClick={() => { login() }}>一键登录</button>
                <p className='ptext' onClick={() => { navigate('/mima') }}>切换其他账号登录</p>
                <p className='ptext1' style={{ marginTop: '150px' }}>-----或通过以下方式登录-----</p>
                <div className='iconbox' >
                    <div className='icon' style={{ backgroundImage: 'url(./img/淘宝.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/微博.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/微信.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/支付宝支付.png)' }}></div>
                    <div className='icon' style={{ backgroundImage: 'url(./img/qq.png)' }}></div>
                </div>
                <p className='ptext3'>登录或注册代表同意<span style={{ color: 'orange' }}>用户服务协议</span></p>
            </div>

        </div>
    )
}
